import { Fragment, useState, useEffect, useRef } from "react"
// vue3中使用组合式api，也没有this, vue3中有一个watchEffect

// 特点：没有this，没有生命周期的, 有props，没有状态, 没有ref
// 在React16.8开始，提出hooks，hooks类似于vue3中的组合式api
// hooks可以弥补函数式组件没有功能
// 优点：性能更好，用的是函数式编程
function DemoA(props) {
  // console.log(this);

  // console.log("函数执行了...");

  // console.log(props);

  // useState可以定义状态，通过数组解构
  // 解构出来的第一个参数就是状态，名字随便写  xxx
  // 第二个参数是改变状态的专属方法  setXxx
  let [number, setNumber] = useState(1);

  // 创建一个ref
  let box = useRef(null);

  // 这样写，就类似于类组件中的componentDidMount
  // vue2中的mounted
  // useEffect(() => {
  //   console.log("页面渲染完成~");
  // }, [])

  // 这样写，类似于componentDidMount + componentDidUpdate
  // vue2中叫updated
  // useEffect(() => {
  //   console.log("页面渲染完成或更新完成~");
  // })

  // 这样写，类似于componentDidMount + 当number变化了执行回调函数
  useEffect(() => {
    console.log("页面渲染完成或更新完成~");
    console.log("box:", box);
    box.current.style.color = "red";
  }, [number]);

  return (
    // <div>
    //   <h2>函数式组件</h2>
    //   <h3>{props.a} -- {props.b}</h3>
    // </div>
    // <Fragment>
    //   <h2>函数式组件</h2>
    //   <h3>{props.a} -- {props.b}</h3>
    // </Fragment>
    <>
      <h2>函数式组件</h2>
      <hr />
      <h3 ref={box}>{number}</h3>
      <button onClick={() => { setNumber(number + 1) }}>+1</button>
      <hr />
      <h3>{props.a} -- {props.b}</h3>
    </>
  )
}

export default DemoA;